<template>
  <basic-container>
    <avue-crud
      :option="option"
      :data="data"
      :table-loading="loading"
      @search-change="searchChange"
      @search-reset="searchReset"
      :page.sync="page"
      @size-change="sizeChange"
      @current-change="currentChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template slot="menuLeft">
        <el-button type="primary" @click="handleCreate">新增</el-button>
      </template>
      <template slot="status" slot-scope="scope">
        <el-tag size="mini">
          {{ scope.row.status_dictText }}
        </el-tag>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import { page, option } from '@/option/tenant/supplier/change'
import { getPage, remove } from '@/api/supplier/change'
import { removeStore } from '@/util/store'
export default {
  name: 'SupplierChange',
  data() {
    return {
      loading: false,
      query: {},
      data: [],
      page,
      option: { ...option, operatingButtons: this.getOperatingButtons }
    }
  },
  methods: {
    getOperatingButtons(row) {
      const edit = { text: '编辑', callback: this.handleEdit }
      const view = { text: '详情', callback: this.handleView }
      const drop = { text: '删除', callback: this.handleDelete }
      if (row.row.status === '0') {
        return [edit, view, drop]
      } else if (row.row.status === '1') {
        return [edit, view]
      } else {
        return [view]
      }
    },
    refreshChange() {
      this.onLoad(this.page, this.query)
    },
    onLoad(page, params = {}) {
      this.loading = true
      getPage(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data
        this.page.total = data.total
        this.data = data.records
        this.loading = false
      })
    },
    searchReset() {
      this.query = {}
      this.onLoad(this.page)
    },
    searchChange(params, done) {
      this.query = params
      this.page.currentPage = 1
      this.onLoad(this.page, params)
      done()
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },
    handleCreate() {
      removeStore({ name: 'supplierId', type: 'session' })
      this.$quickDrawer({
        title: '新增',
        width: '90%',
        component: require('@/views/tenant/supplier/change/form').default,
        props: { type: 'add' },
        on: {
          refresh: () => {
            this.onLoad(this.page)
          }
        }
      })
    },
    handleEdit(row) {
      this.$quickDrawer({
        title: '编辑',
        width: '90%',
        component: require('@/views/tenant/supplier/change/form').default,
        props: { type: 'edit', param: row },
        on: {
          refresh: () => {
            this.onLoad(this.page)
          }
        }
      })
    },
    handleView(row) {
      this.$quickDrawer({
        title: '详情',
        width: '90%',
        component: require('@/views/tenant/supplier/change/form').default,
        props: { type: 'view', param: row },
        on: {
          refresh: () => {
            this.onLoad(this.page)
          }
        }
      })
    },
    handleDelete(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          return remove(row.id)
        })
        .then(() => {
          this.onLoad()
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
    }
  }
}
</script>

<style></style>
